{extend name='public/layout' /}

{block name="meta_title"}首页{/block}

{block name="head"}
<style type="text/css">
	.layui-card-body .layui-btn {
		margin-bottom: 10px;
	}

	#preview img {
		width: 100%;
	}
</style>
{/block}

{block name="body"}
<div class="layui-card">
	<div class="layui-card-header">请求</div>
	<div class="layui-card-body">
		<button class="layui-btn" id="request-btn">基本</button>
	</div>
</div>

<div class="layui-card">
	<div class="layui-card-header">对话框</div>
	<div class="layui-card-body">
		<button class="layui-btn" id="modal-default-btn">基本</button>
		<button class="layui-btn" id="modal-untitle-btn">无标题</button>
		<button class="layui-btn" id="modal-confirm-btn">确认框</button>
		<button class="layui-btn" id="modal-richtext-btn">富文本内容</button>
		<button class="layui-btn" id="modal-lg-btn">大的对话框</button>
		<button class="layui-btn" id="modal-custom-btn">改变按钮文字</button>
		<button class="layui-btn" id="modal-icon-btn">带图标的提示</button>
		<button class="layui-btn" id="modal-child-btn">打开子窗口</button>
	</div>
</div>

<div class="layui-card">
	<div class="layui-card-header">轻提示</div>
	<div class="layui-card-body">
		<button class="layui-btn" id="toast-btn">Toast</button>
		<button class="layui-btn" id="toast-success-btn">Success</button>
		<button class="layui-btn" id="toast-error-btn">Error</button>
		<button class="layui-btn" id="loading-btn">Loading</button>
	</div>
</div>

<div class="layui-card">
	<div class="layui-card-header">图片预览</div>
	<div class="layui-card-body">
		<div class="layui-row" id="preview">
			<div class="layui-col-md3">
				<img src="../../../../public/images/nav/img_1.png">
			</div>
			<div class="layui-col-md3">
				<img src="../../../../public/images/nav/img_2.png">
			</div>
			<div class="layui-col-md3">
				<img src="../../../../public/images/nav/img_3.png">
			</div>
			<div class="layui-col-md3">
				<img src="../../../../public/images/nav/img_4.png">
			</div>
		</div>
	</div>
</div>

<div class="layui-card">
	<div class="layui-card-header">Tooltip</div>
	<div class="layui-card-body" id="tooltip">
		<button class="layui-btn" id="tooltip-btn" data-tooltip="我是一个提示文字">鼠标移动上面会有提示哦</button>
	</div>
</div>

<div class="layui-card">
	<div class="layui-card-header">ColorPicker</div>
	<div class="layui-card-body">
		<div type="color" id="colorpicker"></div>
		<input type="text" class="layui-input layui-input-inline" style="width: 100px" readonly>
	</div>
</div>

<div class="layui-card">
	<div class="layui-card-header">DatePicker</div>
	<div class="layui-card-body">
		<div class="layui-inline">
			<input type="text" class="layui-input" id="datepicker" readonly>
		</div>
	</div>
</div>

<div class="layui-card">
	<div class="layui-card-header">富文本编辑器</div>
	<div class="layui-card-body">
		<textarea id="rich-text" style="height: 400px"></textarea>
	</div>
</div>

<div class="layui-card">
	<div class="layui-card-header">图片上传</div>
	<div class="layui-card-body">
		<button class="layui-btn" id="uploadbox-btn">图片选择框</button>
	</div>
</div>

<div class="layui-card">
	<div class="layui-card-header">地图</div>
	<div class="layui-card-body">
		<input type="text" id="map-auto" class="layui-input">
		<div id="map" style="height:280px"></div>
	</div>
</div>

<div class="layui-card">
	<div class="layui-card-header">图表</div>
	<div class="layui-card-body" id="chart" style="height: 200px">
	</div>
</div>
{/block}

{block name='foot'}
<script src="js/demo/request.js" type="text/javascript"></script>
<script src="js/demo/modal.js" type="text/javascript"></script>
<script src="js/demo/toast.js" type="text/javascript"></script>
<script src="js/demo/preview.js" type="text/javascript"></script>
<script src="js/demo/uploader.js" type="text/javascript"></script>
<script src="js/demo/tooltip.js" type="text/javascript"></script>
<script src="js/demo/colorpicker.js" type="text/javascript"></script>
<script src="js/demo/datepicker.js" type="text/javascript"></script>
<script src="js/demo/chart.js" type="text/javascript"></script>
<script src="js/demo/editor.js" type="text/javascript"></script>
<!--<script src="js/demo/map.js" type="text/javascript"></script>-->
{/block}
